<template>
  <div class="chat">
    <div class="msglist">
      <Search></Search>
      <ChatList></ChatList>
    </div>
    <div :class="[selectChatId == -1? 'chatbox icon iconfont icon-weixin': 'chatbox']">
      <Message></Message>
    </div>
  </div>
</template>

<script>
import Search from "../child/search/search";
import ChatList from "./chat/chatList";
import Message from "./chat/message";
import { mapState } from 'vuex';

export default {
  components: {
    Search,
    ChatList,
    Message
  },
  computed: {
    ...mapState([
      "selectChatId"
    ])
  }
};
</script>

<style scoped>
.chat {
  position: relative;
  display: flex;
  width: 800px;
}

.msglist {
  width: 250px;
  background-color: rgb(230, 230, 230);
}

.chatbox {
  flex: 1;
}

.icon-weixin::before {
  font-size: 100px;
  position: absolute;
  top: 210px;
  right: 228px;
  color: rgb(220, 220, 220);
}
</style>